<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item
        @click="handleSelect($event, item.name)"
        v-for="item in menuList"
        :index="item.name"
        :key="item.name"
        >{{ item.title }}</el-menu-item
      >

      <el-sub-menu index="CLOSE" style="position: absolute; right: 18px">
        <template #title>操作</template>
        <el-menu-item @click="handleSelect($event, CONFIG_ENUM.EDIT)" index="EDIT"
          >退出</el-menu-item
        >
        <el-menu-item
          @click="handleSelect($event, CONFIG_ENUM.CHANGE_PASSWORD)"
          index="CHANGE_PASSWORD"
          >修改密码</el-menu-item
        >
        <el-menu-item @click="handleSelect($event, CONFIG_ENUM.CLOSE_ALL)" index="CLOSE_ALL"
          >全部清除</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import { sessionClear, sessionGet } from '@/utils/sessionStorage'
import { onMounted, ref, watch } from 'vue'
import { routerEnumeration, routerPath, ROUTER_ENUM } from '@/router/utils/routeMenu'
import { AllClose } from '@/utils/routerConfig'
import { useRoute } from 'vue-router'
enum CONFIG_ENUM {
  EDIT = 'EDIT',
  CLOSE_ALL = 'CLOSE_ALL',
  CHANGE_PASSWORD = 'CHANGE_PASSWORD'
}
type RouterSaveType = {
  name: keyof typeof ROUTER_ENUM
  title: (typeof routerEnumeration)[keyof typeof ROUTER_ENUM]
  path: (typeof routerPath)[keyof typeof ROUTER_ENUM]
}
const route = useRoute()
const activeIndex = ref('1')
const menuList = ref<Array<RouterSaveType>>([])
onMounted(() => {
  menuList.value = (sessionGet('_router') as Array<RouterSaveType>) || []
})
watch(
  () => route.name,
  () => {
    menuList.value = sessionGet('_router') as Array<RouterSaveType>
  },
  {
    immediate: true
  }
)
const handleSelect = (key: string, keyPath: keyof typeof ROUTER_ENUM | CONFIG_ENUM) => {
  if (keyPath === 'EDIT') {
    sessionClear()
    router.push({ name: 'login' })
    return
  }
  if (keyPath === 'CLOSE_ALL') {
    console.log(2)
    AllClose()
    return router.push('/')
  }
  router.push(routerPath[keyPath as ROUTER_ENUM])
}
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  background: red;
  .son {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .son:hover {
    background: #434a50;
  }
}
</style>
